<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>评价：</h1>
		<style type="text/css">
			.choice{
				background: url(../img/star1.png) no-repeat;
			}
			li{
				background: url(../img/star2.png) no-repeat;
			}
		</style>
<ul id="star">
    <li title="很差" id="star1" star="1"></li>
    <li title="差" id="star2" star="2"></li>    
    <li title="一般" id="star3" star="3"></li>
    <li title="好" id="star4" star="4"></li>
    <li title="很好" id="star5" star="5"></li>
</ul>
<script src="../js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
 
    $(document).ready(function() {
 
        var _temp_value = 0,//鼠标hover时的等级value
            choiceValue = 0;//默认选定的等级值为1
 
        //鼠标移入的时候
        $("#star li").mouseenter(function() {
            //获取当前的星级
            _temp_value = new Number($(this).attr("star"));
            showStar();
 
        //鼠标移入的时候
        }).mouseout(function(){
            hideStar();
 
        //鼠标移入的时候
        }).click(function(){
            //单击时，设定当前的选定值
            choiceValue = _temp_value;<br>　　　　　　　　hideSatr();　　
        });
 
        //星级显示
        function showStar() {
            for (var i = 1 ; i < _temp_value+1; ++i) {
                $("#star"+i).addClass("choice");
            }
        }
 
        function hideStar() {
            for (var i = 5 ; i > choiceValue; --i) {
                $("#star"+i).removeClass("choice");
            }
        }
    });
</script>
	</body>
</html>
